<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <title>绑定样式</title>
  <style>
    .basic {
      width: 300px;
      height: 50px;
      border: 1px solid black;
    }

    .happy {
      border: 3px solid red;
      background-color: rgba(255, 255, 0, alpha0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
      border: 4px dashed rgb(0, 197, 2);
      background-color: skyblue;
    }

    .normal {
      background-color: #bfa;
    }

    .atguigu1 {
      background-color: yellowgreen;
    }

    .atguigu2 {
      font-size: 20px;
      text-shadow: 2px 2px 10px red;
    }

    .atguigu3 {
      border-radius: 20px;
    }
  </style>
</head>

<body>
  <!-- 创建一个容器 -->
  <div id="root">
    <!-- 
      Vue绑定样式:
        1.class样式
          写法:class="xxx" xxx可以是字符串,对象,数组
            字符串写法适用于:类名不确定,要动态获取
            对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
            数组写法适用于:要把你当个多个样式,个数确定,名字也确定,但不确定用不用
        2.style样式
          :style="{fontSize: XX}"其中xx是动态值
          :style="[a,b]"其中a,b是样式对象
     -->
    <!-- 
      绑定class样式 --字符串写法,适用于:样式的类型不确定,需要动态指定
     -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br>
    <hr>

    <!-- 
      绑定class样式 --数组写法,适用于:要绑定的样式个数不确定,名字不确定      
     -->
    <div class="basic" :class="classArr">{{name}}</div><br>
    <hr>

    <!-- 
      绑定class样式 --数组写法,适用于:要绑定的样式个数确定,名字确定,但是要动态决定是否启用     
     -->
    <div class="basic" :class="classObj">{{name}}</div><br>
    <hr>

    <!-- 
      绑定style样式--对象写法
      -->
    <div class="basic" :style="{fontSize:'40px'}">{{name}}</div><br><hr>
    <div class="basic" :style="styleObj">{{name}}</div><br>
    <hr>
    <!-- 
      绑定style样式--数组写法
      -->
    <div class="basic" :style="[styleObj,styleObj1]">{{name}}</div><br>
    <hr>
    <div class="basic" :style="styleArr">{{name}}</div>
  </div>

  <script>
    Vue.config.productionTip = false

    // 创建Vue实例 
    new Vue({
      el: '#root',
      data() {
        return {
          name: '伍镇浩',
          mood: 'normal',
          classArr: [
            'happy', 'sad', 'normal'
          ],
          classObj: {
            atguigu1: false,
            atguigu2: false
          },
          styleObj: {
            fontSize: '40px',
            color: 'red'
          },
          styleObj1: {
            backgroundColor: 'blue'
          },
          styleArr: [
            {
              fontSize: '40px',
              color: 'red'
            },
            {
              backgroundColor: 'blue'
            }
          ]
        }
      },
      methods: {
        changeMood: function () {
          const arr = ['happy', 'sad', 'normal']
          // Math.random生成0-1的随机数但不包括1 Math.floor取整
          this.mood = arr[Math.floor(Math.random() * 3)]
        }
      },

    })
  </script>
</body>

</html>